<!-- Ana Luisa Figón Treviño -->
<html>
	<head>
		<meta charset='utf-8'>
		<title>The Book List</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script type="text/javascript">
			function nueva(){
				var books = [
					{title: 'The Design of EveryDay Things',
					 img: 'http://ecx.images-amazon.com/images/I/41j2ODGkJDL._AA115_.jpg',
					 author: 'Don Norman',
					 alreadyRead: false
					},
					{title: 'The Most Human Human',
					 img: 'http://ecx.images-amazon.com/images/I/41Z56GwEv9L._AA115_.jpg',
					 author: 'Brian Christian',
					 alreadyRead: true
					}];

				var newDiv = $('<div>');
				$('body').append(newDiv);
				var ol = $('<ol>');
				newDiv.append(ol);
				for (var i = 0; i <= 1; i++){
					var par = $('<p>');
					$('ol').append(par);
				}				

				var p = $('p');
				var o = $('ol');

				o.each(function(i,e){
					var oo = $(e);
					p.each(function(index,elem){
						var ph = $(elem);

						var li = $('<li>');
						ph.append(li);
						li.append(books[index].title);
						var ul = $('<ul>');
						ph.append(ul);
						var l = $('<li>');
						var image = $('<img>');
						image.attr('src', books[index].img);
						ul.append(l);
						l.append(image);
						var nl = $('<li>');
						ul.append(nl);
						nl.append("Author: " + books[index].author);

						if(books[index].alreadyRead){
							ph.css({'color': 'green'});
						}
					});
				});

				
			}
			</script>
	</head>
	<body>
		<h1>My Book List</h1>
		<input type='button' value='Click!' onClick='nueva();'>
	</body>
</html>